<template lang="pug">
van-popup.dialog-wrap--base(v-model="isShowMixin" v-bind="$attrs" v-on="$listeners" :close-on-click-overlay="closeoverlay")
  transition(:duration='300' :enter-active-class="getClass[0]" :leave-active-class="getClass[1]" appear)
    .dialog--base.ff-cn(v-show="isShowMixin" :style='getStyle'
      :class='{[fullscreenSelf ? "fullscreen" : "notfull"]: 1,  mini, drawer: isDrawer }')

      .top--bar.tac.select-none.h40.flex-auto(@dblclick='fullscreenSelf = !fullscreenSelf')
        .flex-center.h100p.fc-b1.fs-m {{title}}
        .dialog--opts(v-if="isPc || height")
          i.van-icon.van-icon-expand-o.hover.mgr1(@click='fullscreenSelf = !fullscreenSelf' title='切换全屏/小窗' v-if="isPc")
          i.van-icon.van-icon-cross.hover-danger(@click='isShowMixin = false' title='关闭')

        i.van-icon.van-icon-arrow-left.press(@click='isShowMixin = false' v-else)

      slot

</template>
<script>
import dialogMixin from '../mixins/dialogMixin'
import { isPc } from '@/utils'

export default {
  name: 'Dialog',
  mixins: [dialogMixin],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    // 点击遮罩是否触发弹窗关闭
    closeoverlay: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    mini: {
      type: Boolean,
    },
    width: {
      type: String,
    },
    height: {
      type: String,
    },
    fullscreen: {
      type: Boolean,
      default: !isPc(),
    },
  },
  data () {
    this.isPc = isPc()
    return {
      fullscreenSelf: this.fullscreen,
      isDrawer: this.height && !this.isPc, // 手机端抽屉效果
    }
  },
  computed: {
    getClass () {
      return !this.fullscreenSelf || this.isPc ? ['animated scaleIn', 'animated scaleOut'] : ['animated slideInUp', 'animated slideOutDown']
    },
    getStyle () {
      if (this.width && this.height) return `height:${this.height};width:${this.width};`
      else if (this.width) return `width:${this.width};`
      else if (this.height) return `height:${this.height};`
      return ''
    },
  },
  watch: {
    fullscreenSelf () {
      setTimeout(() => {
        if (!this.$_evt) this.$_evt = new Event('resize')
        window.dispatchEvent(this.$_evt)
      }, 350)
    },
  },
}
</script>
<style lang="stylus">
.dialog-wrap--base.van-popup--round
  .dialog--base
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
    overflow hidden

.dialog-wrap--base
  top 0
  left 0
  transform none!important
  position relative!important
  overflow visible!important
  width 0
  height 0
  .dialog--base
    position fixed
    left 0
    top 0
    bottom 0
    right 0
    background-color #fff
    z-index 3
    animation-duration 300ms!important
    max-width 100%
    max-height 100%
    transition all  0.35s
    &.notfull
      margin auto
      border-radius 5px
      height 500px
      width 600px
      overflow hidden
    &.mini
      height 200px
      width 300px
    &.drawer
      top auto
    &.fullscreen
      border-radius 0
      margin auto
      height 100%!important
      width 100%!important
    .top--bar
      position relative
      background-color #f8f8f8
      .dialog--opts
        position absolute
        right 10px
        top 50%
        transform translateY(-50%)
        i
          font-size 14px
      i.van-icon-cross,i.van-icon-arrow-left
        cursor pointer
        width 24px
        height 24px
        line-height 24px
        text-align center
      i.van-icon-arrow-left
        position absolute
        top 50%
        left 5px
        transform translateY(-50%)
        font-size 18px

</style>
